<!DOCTYPE html>
<html>
<head>
<title>Guess What</title>
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> -->
<link rel="stylesheet" href="../css/jquery/jquery.mobile-1.4.0.min.css" />
<link rel="stylesheet" href="../css/app/game.css" />
<!-- 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
 -->
<script src="../css/jquery/jquery-1.10.2.js"></script>
<script src="../css/jquery/jquery.mobile-1.4.0.min.js"></script>
<script src="../script/app/game.js"></script>
</head>
<body>

	<!-- ------------------ -->
	<!-- Start of HOME page -->
	<!-- ------------------ -->
	<div data-role="page" id="home" data-theme="b">

		<div data-role="header">
			<h1>Home</h1>
		</div>
		<!-- /header -->

		<div data-role="content">
			<a id="home_newgame_button" href="#game" data-role="button">New Game</a> 
			<a id="home_loadgame_button" href="#load-game" data-role="button">Load Game</a> 
			<a id="home_profile_button" href="#profile" data-role="button">My Profile</a> 
			<a id="home_settings_button" href="#settings" data-role="button" data-icon="gear">Settings</a>
		</div>
		<!-- /content -->

		<div data-role="footer" data-position="fixed">
			<h4>Copyright: Vivz Droid &copy;</h4>
		</div>
		<!-- /footer -->
	</div>	
	<!-- /page -->

	<!-- ---------------------- -->
	<!-- Start of NEW GAME page -->
	<!-- ---------------------- -->
	<div data-role="page" id="game" data-theme="b">

		<div data-role="header">
			<h1>Hi Vivek!</h1>
		</div>
		<!-- /header -->

		<div data-role="content">
		
			<div id="game-input-section">
<!-- 			
				<a id="game-home-button" href="#home" data-role="button" data-icon="home" data-inline="true" data-align="left">Home</a> 
				
				<div class="ui-grid-a">
					<div class="ui-block-a">
						<input id="game-guess-input" type="text" data-inline="true" data-clear-btn="true" />
					</div>
					<div class="ui-block-b">
					    <a id="game-guess-button" href="#" data-role="button" data-icon="check" data-inline="true" data-align="right">Guess</a>
					</div>
				</div>
 -->				
				<div style="position:relative; height:50px;">
					<div style="position:relative; height:50px;">
						<a id="game-home-button" href="#home" data-role="button" data-icon="home" data-inline="true" data-align="left">Home</a> 
					</div>
					<div style="position:relative; height:50px; width: 50%;">
						<input id="game-guess-input" type="text" data-inline="true" data-clear-btn="true" />
					</div>
					<div style="position:relative; height:50px;">
					    <a id="game-guess-button" href="#" data-role="button" data-icon="check" data-inline="true" data-align="right">Guess</a>
					</div>
				</div>
				
			</div>
			
			<div id="game-hints" style="display:none" >
			</div>
			
			<div id="game-guesses">
				<div class="template" style="display:none">
					<div id="game-guess-word"></div>
					<div id="game-guess-clue"></div>
				</div>
			</div>
			
		</div>
		<!-- /content -->

	</div>
	<!-- /page -->

	<!-- ----------------------- -->
	<!-- Start of LOAD GAME page -->
	<!-- ----------------------- -->
	<div data-role="page" id="load-game" data-theme="b">

		<div data-role="header">
			<h1>Your Saved Games</h1>
		</div>
		<!-- /header -->

		<div data-role="content">
			<a href="#game" data-role="button">Saved Game #1</a>
			<a href="#game" data-role="button">Saved Game #2</a>
			<a href="#game" data-role="button">Saved Game #3</a>
			<a href="#game" data-role="button">Saved Game #4</a>
			<a href="#game" data-role="button">Saved Game #5</a>
			<p>
				<a href="#home" data-role="button" data-icon="home">Home</a>
			</p>
		</div>
		<!-- /content -->

		<div data-role="footer" data-position="fixed">
			<h4>Copyright: Vivz Droid &copy;</h4>
		</div>
		<!-- /footer -->
	</div>
	<!-- /page -->

	<!-- ------------------------ -->
	<!-- Start of MY PROFILE page -->
	<!-- ------------------------ -->
	<div data-role="page" id="profile" data-theme="b">

		<div data-role="header">
			<h1>My Profile</h1>
		</div>
		<!-- /header -->

		<div data-role="content">
			<p>Vivek's Profile</p>
			<p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize
				download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black
				circle behind the icon to ensure that it has good contrast on any background color.</p>
			<p>
				<a href="#home" data-role="button" data-icon="home">Home</a>
			</p>
		</div>
		<!-- /content -->

		<div data-role="footer" data-position="fixed">
			<h4>Copyright: Vivz Droid &copy;</h4>
		</div>
		<!-- /footer -->
	</div>
	<!-- /page -->

	<!-- ---------------------- -->
	<!-- Start of SETTINGS page -->
	<!-- ---------------------- -->
	<div data-role="page" id="settings" data-theme="b">

		<div data-role="header">
			<h1>Settings</h1>
		</div>
		<!-- /header -->

		<div data-role="content">
			<p>Settings</p>
			<p>
				<a href="#home" data-role="button" data-icon="home">Home</a>
			</p>
		</div>
		<!-- /content -->

		<div data-role="footer" data-position="fixed">
			<h4>Copyright: Vivz Droid &copy;</h4>
		</div>
		<!-- /footer -->
	</div>
	<!-- /page -->
	
</body>
</html>